"use client"

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { Hint } from "@/components/hint"
import { Logo } from "./logo"
import { Button } from "@/components/ui/button"
import { ChevronDown, Download, MousePointerClick, Redo2, Undo2 } from "lucide-react"
import { CiFileOn } from "react-icons/ci"
import { Separator } from "@/components/ui/separator"
import { BsCloudCheck } from "react-icons/bs"
import { ActiveTool } from "../types"
import { cn } from "@/lib/utils"

interface NavbarProps {
  activeTool: ActiveTool;
  onChangeActiveTool: (tool: ActiveTool) => void;
}

export const Navbar = ({
  activeTool,
  onChangeActiveTool
}: NavbarProps) => {
  return (
    <nav className="w-full flex items-center p-4 h-[68px] gap-x-8
    border-b lg:pl-[34px]">
      <Logo />
      <div className="w-full flex items-center gap-x-1 h-full">
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <Button size="sm" variant="ghost">
              File
              <ChevronDown className="ml-2"></ChevronDown>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="min-w-60">
            <DropdownMenuItem
              className="flex items-center gap-x-2"
              onClick={() => { }}
            >
              <CiFileOn />
              <div>
                <p>Open</p>
                <p className="text-xs text-muted-foreground">
                  Open a JSON file
                </p>
              </div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <Separator orientation="vertical" className="mx-2" />
        <Hint label="select" side="bottom" align="start" sideOffset={10}>
          <Button variant="ghost"
            size="icon"
            onClick={() => onChangeActiveTool("select")}
            className={cn(activeTool === "select" && "bg-gray-100")}
          >
            <MousePointerClick />
          </Button>
        </Hint>
        <Hint label="Undo" side="bottom" align="center" sideOffset={0}>
          <Button variant="ghost"
            size="icon"
            onClick={() => { }}
            className=""
          >
            <Undo2 />
          </Button>
        </Hint>
        <Hint label="Redo" side="bottom" align="end" sideOffset={0}>
          <Button variant="ghost"
            size="icon"
            onClick={() => { }}
            className=""
          >
            <Redo2 />
          </Button>
        </Hint>
        <Separator orientation="vertical" className="mx-2" />
        <div className="flex flex-1 items-center gap-x-2">
          <BsCloudCheck className="size-[20px] text-muted-foreground" />
          <div className="text-xs text-muted-foreground">
            Saved
          </div>
        </div>
        <div className="ml-auto flex items-center gap-x-4">
          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Button size="sm" variant="ghost">
                Export
                <Download />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="min-w-60">
              <DropdownMenuItem
                className="flex items-center gap-x-2"
                onClick={() => { }}>
                <CiFileOn className="" />
                <div>
                  <p>JSON</p>
                  <p className="text-xs text-muted-foreground">
                    Save for later editing
                  </p>
                </div>
              </DropdownMenuItem>
              <DropdownMenuItem
                className="flex items-center gap-x-2"
                onClick={() => { }}>
                <CiFileOn />
                <div>
                  <p>PNG</p>
                  <p className="text-xs text-muted-foreground">
                    Bset for sharing on the web
                  </p>
                </div>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

      </div>

    </nav>
  )
}